<template>
  <div class="page">
      <mt-header  class="fontHead"fixed title="字体标注"></mt-header>
      <mt-field class="phoneNumber"  type="tel" v-model="telNumber" placeholder="手机号"></mt-field>
      <mt-field  class="verificationCode"  v-model="codeNumber" placeholder="验证码"></mt-field>
      <mt-button class="getVerificationCode"type="default" :disabled="disabled" @click.native="getCode">{{SMSCodeText}}</mt-button>
      <mt-button class="upBut" @click.native="login">登录</mt-button>
  </div>
</template>
<script>
export default {
  name: 'login',
  data () {
    return {
      telNumber:'',
      codeNumber:'',
      SMSCodeText:'获取验证码',
      disabled:false
    }
  },
  mounted:function () {

  },
  methods:{
    getCode:function () {
      var self = this
      let maxTime = 60;
      this.disabled = true;
      AV.Cloud.requestSmsCode(self.telNumber).then(function (success) {
        self.messageInfo('发送验证码成功！')
        this.timer = setInterval(function () {
          maxTime--;
          self.SMSCodeText = "(" + maxTime + "s)";
          if (maxTime <= 0) {
            self.SMSCodeText = '获取验证码';
            self.disabled = false
          }
        }, 1000);
      },function (err) {
        if(err.code === 213){
          self.messageInfo('发送失败,检查手机号是否为用户认证手机号！')
        }else if(err.code === 601){
          self.messageInfo('发送短信过快，请稍后重试！')
        }else{
          self.messageInfo('网络错误，请稍候再试！')
        }
      })
    },
    login:function () {
      var self = this
      AV.User.signUpOrlogInWithMobilePhone(self.telNumber,self.codeNumber).then(function (success) {
        //checkUserImage
        self.messageInfo("登录成功");
        var user = AV.User.current()
        user.getRoles().then(function(reslut){
          if(reslut.length===0){
            self.$router.push({path: '/selectType'});
          }
          if(reslut[0].attributes.name==='admin'){
            self.$router.push({path: '/labelInformation'});
          }
          else{
            self.$router.push({path: '/selectType'});
          }
        })
      },function (err) {
        var message;
        if (err.code === 603){
          message = '登录失败，无效验证码'
        }else if(err.code === 219){
          message = '登录失败频繁，15分钟后再试'
        }else if(err.code === 211){
          message = '登录失败，未发现用户'
        } else{
          message = '网络错误，请稍候再试'
        }
        self.messageInfo(message)
      })
    },
    messageInfo:function (message) {
      this.$toast({
        message: message,
        position: 'top',
        duration: 5000
      });
    },
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page{
    height: 100%;

  }
  .fontHead{
    position: absolute;
    font-size: 15px;
    color: #000000;
    background-color: #F8F8F8;
  }
  .getVerificationCode{
    color: #000000;
    border: 1px solid #B9B9B9;
    height: 60px;
    width: 30%;
    font-size:10px;
    background-color: #ffffff;
    position:absolute;
    margin-top: 75%;
    margin-left: 63%;
  }
  .phoneNumber{
    position: absolute;
    border: 1px solid #B9B9B9;
    margin-top: 45%;
    margin-left: 6%;
    width:88%;
    height: 60px;
    font-size: 10px;
  }
  .verificationCode{
    position: absolute;
    margin-top: 75%;
    height: 60px;
    margin-left: 6%;
    width:45%;
    border: 1px solid #B9B9B9;
  }
  .upBut{
    position: absolute;
    color: #000000;
    font-size: 15px;
    border: 1px solid #B9B9B9;
    background-color: #009FC2;
    margin-left: 6%;
    width: 88%;
    height: 60px;
    margin-top:100%;
  }
  /*.number{*/
    /*min-height: 330px;*/
    /*height:60%;*/

  /*}*/
  /*.login{*/
    /*min-height: 150px;*/
    /*height: 40%;*/
  /*}*/
</style>
